<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>m.dot | A Pelican Blog</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i" />
  <link rel="stylesheet" href="static/m-dark.css" />
  <link rel="canonical" href="page.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<header><nav id="navigation">
  <div class="m-container">
    <div class="m-row">
      <a href="./" id="m-navbar-brand" class="m-col-t-9 m-col-m-none m-left-m">A Pelican Blog</a>
    </div>
  </div>
</nav></header>
<main>
<article>
  <div class="m-container m-container-inflatable">
    <div class="m-row">
      <div class="m-col-l-10 m-push-l-1">
        <h1>m.dot</h1>
<!-- content -->
<p>Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have
predictable rendering on the CIs.</p>
<p>Different shapes, fills etc. All default colors, filled only the first node
and the arrowheads, nothing else. Non-default font size should be preserved.</p>
<div class="m-graph">
<svg style="width: 16.250rem; height: 5.312rem;" viewBox="0.00 0.00 259.77 84.77">
<g transform="scale(1 1) rotate(0) translate(4 80.7696)">
<title>Basics</title>
<g class="m-node">
<title>a</title>
<polygon points="54,-40.3848 0,-40.3848 0,-4.38478 54,-4.38478 54,-40.3848"/>
<text text-anchor="middle" x="27" y="-18.5848">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="113.385" cy="-22.3848" rx="18.2906" ry="18.2906"/>
<ellipse cx="113.385" cy="-22.3848" rx="22.2701" ry="22.2701"/>
<text text-anchor="middle" x="113.385" y="-18.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M54.2373,-22.3848C62.63,-22.3848 72.0104,-22.3848 80.7459,-22.3848"/>
<polygon points="80.9716,-25.8849 90.9716,-22.3848 80.9716,-18.8849 80.9716,-25.8849"/>
</g>
<g class="m-node m-flat">
<title>c</title>
<ellipse cx="224.77" cy="-22.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="224.77" y="-18.5848">c</text>
</g>
<g class="m-edge">
<title>b&#45;&gt;c</title>
<path d="M135.996,-22.3848C150.639,-22.3848 170.35,-22.3848 187.383,-22.3848"/>
<polygon points="187.574,-25.8849 197.574,-22.3848 187.573,-18.8849 187.574,-25.8849"/>
<text text-anchor="middle" x="166.77" y="-34.3848" style="font-size: 40.0px;">0</text>
</g>
<g class="m-edge">
<title>c&#45;&gt;c</title>
<path d="M214.492,-39.6042C212.394,-49.5298 215.82,-58.7696 224.77,-58.7696 230.503,-58.7696 233.969,-54.9775 235.168,-49.6425"/>
<polygon points="238.668,-49.5611 235.047,-39.6042 231.668,-49.6458 238.668,-49.5611"/>
<text text-anchor="middle" x="224.77" y="-63.9696">1</text>
</g>
</g>
</svg>
</div>
<div class="m-graph">
<svg style="width: 5.625rem; height: 2.750rem;" viewBox="0.00 0.00 90.00 44.00">
<g transform="scale(1 1) rotate(0) translate(4 40)">
<title>More shapes</title>
<g class="m-node m-flat">
<title>d</title>
<text text-anchor="middle" x="41" y="-14.2">outsider</text>
</g>
</g>
</svg>
</div>
<p>Colors:</p>
<div class="m-graph">
<svg style="width: 5.750rem; height: 8.500rem;" viewBox="0.00 0.00 92.38 135.54">
<g transform="scale(1 1) rotate(0) translate(4 131.539)">
<title>Colors</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-109.154" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-105.354">a</text>
</g>
<g class="m-node">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="18.2703" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-90.6163C27,-78.2149 27,-61.3346 27,-47.1192"/>
<polygon points="30.5001,-46.8863 27,-36.8864 23.5001,-46.8864 30.5001,-46.8863"/>
<text text-anchor="middle" x="41" y="-59.9696">yes</text>
</g>
<g class="m-edge">
<title>b&#45;&gt;b</title>
<path d="M43.8422,-26.1192C53.9096,-27.8379 63.3848,-25.2598 63.3848,-18.3848 63.3848,-13.9805 59.4961,-11.3396 54.0544,-10.4622"/>
<polygon points="53.776,-6.96664 43.8422,-10.6504 53.905,-13.9655 53.776,-6.96664"/>
<text text-anchor="middle" x="73.8848" y="-14.5848">no</text>
</g>
</g>
</svg>
</div>
<p>Unoriented graph without a title:</p>
<div class="m-graph m-success">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.539)">
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M21.1218,-73.023C19.9539,-61.8963 19.9594,-47.4535 21.1384,-36.3583"/>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M32.8782,-73.023C34.0461,-61.8963 34.0406,-47.4535 32.8616,-36.3583"/>
</g>
</g>
</svg>
</div>
<p>Strict graphs:</p>
<div class="m-graph">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.539)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.6607C27,-64.9784 27,-55.7693 27,-47.185"/>
<polygon points="30.5001,-47.1687 27,-37.1687 23.5001,-47.1687 30.5001,-47.1687"/>
</g>
</g>
</svg>
</div>
<div class="m-graph">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.539)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&#45;b</title>
<path d="M27,-72.6607C27,-61.8548 27,-48.0281 27,-37.1687"/>
</g>
</g>
</svg>
</div>
<p>Structs:</p>
<div class="m-graph">
<svg style="width: 13.000rem; height: 5.438rem;" viewBox="0.00 0.00 208.00 87.00">
<g transform="scale(1 1) rotate(0) translate(4 83)">
<title>Structs</title>
<g class="m-node m-flat">
<title>struct</title>
<polygon points="0,-0.5 0,-78.5 78,-78.5 78,-0.5 0,-0.5"/>
<text text-anchor="middle" x="39" y="-61.7">a</text>
<polyline points="0,-52.5 78,-52.5 "/>
<text text-anchor="middle" x="39" y="-35.7">b</text>
<polyline points="0,-26.5 78,-26.5 "/>
<text text-anchor="middle" x="13" y="-9.7">c</text>
<polyline points="26,-0.5 26,-26.5 "/>
<text text-anchor="middle" x="39" y="-9.7">d</text>
<polyline points="52,-0.5 52,-26.5 "/>
<text text-anchor="middle" x="65" y="-9.7">e</text>
</g>
<g class="m-node m-flat">
<title>another</title>
<polygon points="96,-13.5 96,-65.5 200,-65.5 200,-13.5 96,-13.5"/>
<text text-anchor="middle" x="109" y="-35.7">a</text>
<polyline points="122,-13.5 122,-65.5 "/>
<text text-anchor="middle" x="135" y="-48.7">b</text>
<polyline points="122,-39.5 148,-39.5 "/>
<text text-anchor="middle" x="135" y="-22.7">c</text>
<polyline points="148,-13.5 148,-65.5 "/>
<text text-anchor="middle" x="161" y="-35.7">d</text>
<polyline points="174,-13.5 174,-65.5 "/>
<text text-anchor="middle" x="187" y="-35.7">e</text>
</g>
</g>
</svg>
</div>
<figure class="m-figure">
<svg class="m-graph m-info" style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.539)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.6607C27,-64.9784 27,-55.7693 27,-47.185"/>
<polygon points="30.5001,-47.1687 27,-37.1687 23.5001,-47.1687 30.5001,-47.1687"/>
</g>
</g>
</svg>
<figcaption>This is a title.</figcaption>
<p>This is a description.</p>
</figure>
<figure class="m-figure">
<svg class="m-graph" style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.539)">
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.6607C27,-64.9784 27,-55.7693 27,-47.185"/>
<polygon points="30.5001,-47.1687 27,-37.1687 23.5001,-47.1687 30.5001,-47.1687"/>
</g>
</g>
</svg>
<p>The graph below should not be styled as a part of the figure:</p>
<div class="m-graph m-danger">
<svg style="width: 3.875rem; height: 7.375rem;" viewBox="0.00 0.00 62.00 117.54">
<g transform="scale(1 1) rotate(0) translate(4 113.539)">
<title>A to B</title>
<g class="m-node m-flat">
<title>a</title>
<ellipse cx="27" cy="-91.1543" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-87.3543">a</text>
</g>
<g class="m-node m-flat">
<title>b</title>
<ellipse cx="27" cy="-18.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="27" y="-14.5848">b</text>
</g>
<g class="m-edge">
<title>a&#45;&gt;b</title>
<path d="M27,-72.6607C27,-64.9784 27,-55.7693 27,-47.185"/>
<polygon points="30.5001,-47.1687 27,-37.1687 23.5001,-47.1687 30.5001,-47.1687"/>
</g>
</g>
</svg>
</div>
</figure>
<p>Subgraphs:</p>
<div class="m-graph">
<svg style="width: 10.875rem; height: 17.625rem;" viewBox="0.00 0.00 174.00 282.31">
<g transform="scale(1 1) rotate(0) translate(4 278.309)">
<g class="m-cluster">
<title>cluster_Outer</title>
<polygon points="8,-8 8,-266.309 158,-266.309 158,-8 8,-8"/>
<text text-anchor="middle" x="83" y="-249.509">Outer</text>
</g>
<g class="m-cluster">
<title>cluster_Inner</title>
<polygon points="80,-80.7696 80,-232.309 150,-232.309 150,-80.7696 80,-80.7696"/>
<text text-anchor="middle" x="115" y="-215.509">Inner</text>
</g>
<g class="m-node m-flat">
<title>A</title>
<ellipse cx="43" cy="-179.924" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="43" y="-176.124">A</text>
</g>
<g class="m-node m-flat">
<title>B</title>
<ellipse cx="115" cy="-107.154" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="115" y="-103.354">B</text>
</g>
<g class="m-edge">
<title>A&#45;&gt;B</title>
<path d="M57.9184,-164.26C67.9585,-154.392 81.3763,-141.203 92.6801,-130.093"/>
<polygon points="95.4224,-132.305 100.101,-122.799 90.5154,-127.313 95.4224,-132.305"/>
</g>
<g class="m-node m-flat">
<title>C</title>
<ellipse cx="43" cy="-107.154" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="43" y="-103.354">C</text>
</g>
<g class="m-edge">
<title>A&#45;&gt;C</title>
<path d="M43,-161.43C43,-153.748 43,-144.539 43,-135.955"/>
<polygon points="46.5001,-135.938 43,-125.938 39.5001,-135.938 46.5001,-135.938"/>
</g>
<g class="m-node m-flat">
<title>D</title>
<ellipse cx="115" cy="-34.3848" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="115" y="-30.5848">D</text>
</g>
<g class="m-edge">
<title>B&#45;&gt;D</title>
<path d="M115,-88.6607C115,-80.9784 115,-71.7693 115,-63.185"/>
<polygon points="118.5,-63.1687 115,-53.1687 111.5,-63.1687 118.5,-63.1687"/>
</g>
<g class="m-node m-flat">
<title>B2</title>
<ellipse cx="115" cy="-179.924" rx="27" ry="18.2703"/>
<text text-anchor="middle" x="115" y="-176.124">B2</text>
</g>
<g class="m-edge">
<title>B2&#45;&gt;B</title>
<path d="M115,-161.43C115,-153.748 115,-144.539 115,-135.955"/>
<polygon points="118.5,-135.938 115,-125.938 111.5,-135.938 118.5,-135.938"/>
</g>
</g>
</svg>
</div>
<!-- /content -->
      </div>
    </div>
  </div>
</article>
</main>
</body>
</html>
